<template>
  <div id="map"></div>
</template>

<script setup>
import { gaode_vector } from '../gaode/gaode'
import { app } from '../main'
import {  onMounted } from 'vue'

onMounted(() => {
  const map = new ol.Map({
    target: 'map',
    layers: [gaode_vector],
    view: new ol.View({
      center: [114.3, 30.5],
      zoom: 4,
      projection: 'EPSG:4326',
    }),
  })
  app.provide('$map', map)
})
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
}
#map {
  width: 100vw;
  height: 100vh;
}
</style>
